<template>
  <view class="search-bar">
    <view class="container">
      <view class="left-wrap">
        <view class="icon">
          <image src="/static/pages/home/hb.png"></image>
        </view>
      </view>
      <view class="center-wrap">
        <i class="iconfont icon">&#xe692;</i>
        <input
          :value="value"
          :placeholder="placeholder"
          @input="handlerInput"
        />
        <i class="iconfont close" v-show="value" @click="reset">&#xe66f;</i>
      </view>
      <view class="right-wrap">
        <view class="icon iconfont">&#xe8cb;</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "SearchBar",
    props: {
      value: String,
      placeholder: {
        type: String,
        default: "请输入搜索关键字",
      },
      rightText: {
        type: String,
        default: ''
      },
    },
    data() {
      return {};
    },
    methods: {
      handlerInput(e) {
        this.$emit('input', e.target.value)
      },
      reset() {
        this.$emit("input", "");
      },
    },
  };
</script>

<style lang="scss" scoped>
  .search-bar {
    width: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 10upx 0;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1500;

    .container {
      flex: 1;
      height: 65rpx;
      display: flex;
      justify-content: space-between;
      margin-top: var(--status-bar-height);
      
      .left-wrap {
        display: flex;
        align-items: center;
        
        image {
          width: 60upx;
          height: 60upx;
          padding: 0 15upx;
          position: relative;
          top: 5upx;
        }
      }

      .center-wrap {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        border: 1.6px solid #F83243;
        border-radius: 35upx;
        
        .iconfont {
          text-align: center;
        }

        .icon {
          color: #323233;
          font-size: 26upx;
          padding: 0 20upx 0 24upx;
        }

        input {
          flex: 1;
          height: 100%;
          line-height: 100%;
          outline: none;
          border: 0;
          background: transparent;
          color: #323233;
          font-size: 26upx;

          &::placeholder {
            color: #c8c9cc;
          }
        }

        .close {
          width: 80upx;
          color: #cdd0d5;
          font-size: 36upx;
        }
      }

      .right-wrap {
        display: flex;
        align-items: center;
        
        .icon {
          width: 50upx;
          color: #333;
          font-size: 45upx;
          text-align: center;
          padding: 8upx 20upx;
        }
      }
    }
  }
</style>
